<template>
    <div>
    <!-- 头部 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>酬金申请</el-breadcrumb-item>
      </el-breadcrumb>

    <!-- 条件查询 -->
    <el-card class="boxCard">

      <el-row>
        <el-col :span="24">
          <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>条件区域</el-breadcrumb-item>
        </el-breadcrumb>
        </el-col>   
      </el-row>   


        <!-- 用户名 -->
        <el-row>
          <el-col :span="10" :class="this.state==1?'hide':'show'">
            <div class="right">

              用户名：
              <el-input placeholder="请输入内容（模糊查询）" v-model="SuserName"  clearable>
              </el-input>
            </div>
          </el-col>


        <!-- 酬金科目 -->
          <el-col :span="12">
            <div class="grid-content bg-purple-dark" >
              酬金科目：
              <el-input placeholder="请输入内容（模糊查询）"  v-model="ScourseName" clearable>

              </el-input>
            </div>
          </el-col>
        </el-row>

        <!-- 邮箱 -->
        <el-row>

          <el-col :span="10"  :class="this.state==1?'hide':'show'">
            <div class="right">

              邮箱：
              <el-input placeholder="请输入内容（模糊查询）" v-model="Semail" clearable>

              </el-input>
            </div>
          </el-col>

        <!-- 酬金政策 -->
          <el-col :span="12">
            <div class="grid-content bg-purple" >
              酬金政策：
              <el-input placeholder="请输入内容（模糊查询）" v-model="SpolicyName" clearable>
              </el-input>
            </div>
          </el-col>          
        </el-row>
       <!-- 电话 -->
       <el-row>
          <el-col :span="10"  :class="this.state==1?'hide':'show'">
            <div class="right">
              电话：
              <el-input placeholder="请输入内容（精确查询）" v-model="Sphone" clearable>
              </el-input>
            </div>
          </el-col>  
        </el-row>
    </el-card>

    <el-card class="boxCard">
          <div class="grid-content bg-purple-dark">
            <el-button @click="searchAll" type="primary">查询</el-button>
            <el-button @click="resetAll" type="warning">重置</el-button>
          </div>
    </el-card>

      <!-- 表格内容 -->
      <el-card>
        <el-row>
              <el-col :span="24">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>列表区域</el-breadcrumb-item>
              </el-breadcrumb>
            </el-col> 
        </el-row>
        <el-table :data="tableData1" height="370" border style="width: 100%">
          <el-table-column prop="userName" label="用户名" align='center'>
          </el-table-column>
          <el-table-column prop="phone" label="电话" align='center'>
          </el-table-column>
          <el-table-column prop="email" label="邮箱" align='center'>
          </el-table-column>
          <el-table-column prop="id" label="政策id" align='center'>
          </el-table-column>
          <el-table-column prop="policyName" label="酬金政策" align='center'>
          </el-table-column>
          <el-table-column prop="course.courseName" label="酬金科目" align='center'>
          </el-table-column>
          <el-table-column prop="policyRule.userNumber" label="最大用户量" align='center'>
          </el-table-column>
          <el-table-column prop="policyRule.returnRule" label="返回标准" align='center'>
          </el-table-column>
          <el-table-column prop="policyRule.basicMoney" label="每单固定金额" align='center'>
          </el-table-column>
          <!-- <el-table-column prop="storeRate" label="税率" align='center'>
          </el-table-column>  -->
          <!-- <el-table-column prop="money" label="总金额">
          </el-table-column>          -->
          <el-table-column label="操作" align='center'>
            <template slot-scope="scope">
              <el-button size="small" icon="el-icon-search" circle @click="checkApply(scope.row)"></el-button>
              <el-button size="small" type="success" icon="el-icon-check" circle @click="passApply(scope.row)"></el-button>
            </template>      
        </el-table-column>

        </el-table>
            <div class="page">
                <el-pagination
                        background
                        layout="prev, pager, next" :total="this.count"
                        @current-change="fengye($event)"
                >
                </el-pagination>
                总条数:{{ this.count }}
                当前页数: {{ this.page }}/{{ this.pageCount }} 页
            </div>
      </el-card>  

      <!-- 查看对话框 -->
        <el-dialog title="查看明细" :visible.sync="dialogFormCheckVisible">
            <el-descriptions class="margin-top"  :column="3"  border>
                <el-descriptions-item>
                    <template slot="label">
                        用户名：
                    </template>
                     {{ this.checkform.userName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        电话
                    </template>
                    {{ this.checkform.phone }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        邮箱：
                    </template>
                    {{ this.checkform.email }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        政策id：
                    </template>
                    {{ this.checkform.policyId }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        酬金政策：
                    </template>
                    {{ this.checkform.policyName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        酬金政策：
                    </template>
                    {{ this.checkform.policyName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        酬金科目：
                    </template>
                        {{ this.checkform.courseName  }}
	</el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        最大用户量：
                    </template>
                    {{ this.checkform.userNumber  }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        返回标准：
                    </template>
                    {{ this.checkform.returnRule }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        每单固定金额：
                    </template>
                    {{ this.checkform.basicMoney }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        办理数目：
                    </template>
                   {{ this.checkform.amount }}
                </el-descriptions-item>


            </el-descriptions>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormCheckVisible = false">确定</el-button>
            </div>
        </el-dialog>
      <!-- 页脚内容 -->

    </div>

    
</template>

<script>
export default {
    data(){
      return{
        state:0,
        id:0,

        tableData:[],
        tableData1:[],
        ceshi:[],
        ce:0,
        limit:10,
        page:1,
        pageCount:0,
        count:0,                                        
        value:'',
        dialogFormCheckVisible:false,   

        SuserName:'',
        Sphone:'',
        Semail:'',
        SpolicyName:'',
        ScourseName:'',
        userAction:'2',

        checkform: {
        userName: "",
        phone: "",
        email: "",
        policyId: 0,
        policyName: "",
        courseName: "",
        userNumber: 0,
        returnRule: 0,
        basicMoney:0,
        storeRate:0,
        money:0,
        amount:0,
        userId:0,
        fatherId:0,
        fatherName:0,
        otherType:0,
        numberLimit:0,
        numbered:0,
        settle:0,
        userAction:0,
      },

      }
    },
    mounted:function(){
        this.state=this.$store.state.userInfo.userAction,
            this.id=this.$store.state.userInfo.id
        console.log(this.$store.state.userInfo.id)
        console.log(this.state)
      this.displayApply()
    },
    methods:{
      displayApply:function(){
        this.tableData1=[],
        this.tableData=[],
        this.ceshi=[],   
        this.ce=0,
      this.limit=10,
      this.page=1,
      this.pageCount=0,
      this.count=0,    

        this.$axios.get('api/remu/selectByAction',{
          params:{
            userAction:this.state,
            userId:this.id
          }
        }).then((response)=>{
          let result = response.data;
          console.log(result)
          console.log(result.data)
          if(result.code==200){
            this.ceshi = result.data
            for(let i=0;i<this.ceshi.length;i++){
                for(let j=0;j<this.ceshi[i].policyInfoDtoList.length;j++){
                    this.tableData[this.ce]={ces:this.ce}
                    Object.assign(this.tableData[this.ce],
                    this.ceshi[i],this.ceshi[i].policyInfoDtoList[j])
                    this.ce++
                }
            }
            this.pageCount = Math.ceil(result.count/this.limit);
            this.count = result.count;
          this.tableData1=this.tableData
            console.log(this.tableData1)
          }else{
            this.$alert(result.msg)
          }
        }).catch(()=>{})
      },
      checkApply:function(obj){
      console.log(obj)
      this.checkform.userName = obj.userName;
      this.checkform.userId = obj.userId;
      this.checkform.phone = obj.phone;
      this.checkform.email = obj.email;
      this.dialogFormCheckVisible = true;
      this.checkform.policyId = obj.id;
      this.checkform.policyName = obj.policyName;
      this.checkform.courseName = obj.course.courseName;
      this.checkform.userNumber = obj.policyRule.userNumber;
      this.checkform.returnRule = obj.policyRule.returnRule;
      this.checkform.basicMoney = obj.policyRule.basicMoney;
      this.checkform.storeRate = obj.storeRate;
      this.checkform.amount = obj.amount;
      },
      resetAll:function(){
        this.SuserName='',
        this.Sphone='',
        this.Semail='',
        this.SpolicyName='',
        this.ScourseName='',
        this.displayApply()        
      },
      searchAll:function(){
        this.$axios.get('api/remu/selectByAction',{
          params:{
            userAction:this.state,
            userId:this.id,
            userName:this.SuserName,
            phone:this.Sphone,
            email:this.Semail,
            policyName:this.SpolicyName,
            courseName:this.ScourseName
          }
        }).then((response)=>{
          console.log(response)
          this.tableData1 =[]
          this.tableData = []
          let result = response.data;
          console.log(result)
          console.log(result.data)
          if(result.code==200){
            this.ceshi = result.data
            for(let i=0;i<this.ceshi.length;i++){
                for(let j=0;j<this.ceshi[i].policyInfoDtoList.length;j++){
                    this.tableData[this.ce]={ces:this.ce}
                    Object.assign(this.tableData[this.ce],
                    this.ceshi[i],this.ceshi[i].policyInfoDtoList[j])
                    this.ce++
                }
            }

            this.tableData1=this.tableData
            console.log(this.tableData1)
            this.pageCount = Math.ceil(result.count/this.limit);
            this.count = result.count;
          }else{
            this.$alert(result.msg)
          }
        }).catch(()=>{})        
      },
    fengye: function (e) {
      console.log(e);
      this.page = e;
      this.$axios
        .get("api/policyInfo/selectByAction", {params:{ limit: 10, page: e }})
        .then((response) => {
          console.log(response)
          this.tableData1 =[]
          this.tableData = []
          let result = response.data;
          console.log(result.data)
          if(result.code==200){
            this.ceshi = result.data
            for(let i=0;i<this.ceshi.length;i++){
                for(let j=0;j<this.ceshi[i].policyInfoDtoList.length;j++){
                    this.tableData[this.ce]={ces:this.ce}
                    Object.assign(this.tableData[this.ce],
                    this.ceshi[i],this.ceshi[i].policyInfoDtoList[j])
                    this.ce++
                }
            }
            this.tableData1=this.tableData
            console.log(this.tableData1)
          } else {
            this.$alert(result.msg);
          }
        })
        .catch(() => {});
    },
      passApply:function(obj){
        console.log(obj)
        this.$axios.post('api/remu/insertSettlements',{
          userAction:obj.userAction,
          userId:obj.userId,
          policyInfoId:obj.id,
          fatherId:obj.fatherId,
          fatherName:obj.fatherName,
          otherType:obj.otherType,
          numberLimit:obj.numberLimit,
          amount:obj.amount,
          money:(obj.amount+obj.policyRule.returnRule)*(1-obj.storeRate)*obj.policyRule.basicMoney,
          numbered:obj.numbered,
          settle:obj.settle
        }).then((response)=>{
          let result = response.data
          console.log(result)
          console.log((obj.amount+obj.policyRule.returnRule)*(1-obj.storeRate)*obj.policyRule.basicMoney)
          if(result.code==200){
            this.displayApply()
          }else{
              if (result.time)
              {
            this.$alert(result.msg+result.time)}
              else {
                  this.$alert(result.msg)
              }
          }
        }).catch((err)=>{
          console.log(err)
        })
      }
      
    }
}
</script>

<style scoped>
.right {
  text-align: right;
}
.left {
  text-align: left;
}
.boxCard{
  margin-bottom: 10px;
}
.el-breadcrumb {
  margin-bottom: 10px;
}
.el-row {
  margin-bottom: 10px;
}
.el-input {
  width: 217px;
}

.hide{
  display: none;
}

.show{
  display: inline-block;
}

.el-form{
  text-align: left !important;
}

.page {
  margin-top: 20px;
}
</style>